<template>
    <scroll ref="scrollRef" :probeType="3" @scroll="onScroll" class="index-list">
        <ul ref="groupRef">
            <li v-for="group in data" class="group" :key="group.title">
                <h2 class="title">{{group.title}}</h2>
                <ul>
                    <li v-for="item in group.list" @click="onItemClick(item)" class="item" :key="item.id">
                        <img class="avatar" v-lazy="item.pic">
                        <span class="name">{{item.name}}</span>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="fixed" v-show="fixedTitle" :style="fixedStyle">
            <div class="fixed-title">{{fixedTitle}}</div>
        </div>
        <div @touchstart.stop.prevent='onShortcutTouchStart'
          @touchmove.stop.prevent='onShortcutTouchMove'
          class="shortcut">
            <ul>
                <li v-for="(item, index) in shortcutList" :key="item" :data-index="index" class="item" :class="{'current':currentIndex === index}">
                    {{item}}
                </li>
            </ul>
        </div>
    </scroll>
</template>

<script>
import Scroll from '@/components/base/scroll/scroll'
import useFixed from '@/components/base/index-list/use-fixed'
import useShortcut from './use-shortcut'

    export default {
        props: {
            data: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        components: {
            Scroll
        },
        emits: ['select'],
        setup(props, {emit}) {
            const { groupRef, onScroll, fixedTitle, fixedStyle, currentIndex } = useFixed(props)
            const {shortcutList, scrollRef, onShortcutTouchStart, onShortcutTouchMove} = useShortcut(props, groupRef)
            function onItemClick(item) {
                emit('select', item)
            }

            return {
                groupRef,
                scrollRef,
                onScroll,
                fixedTitle,
                fixedStyle,
                currentIndex,
                shortcutList,
                onShortcutTouchStart,
                onShortcutTouchMove,
                onItemClick
            }
        }

    }
</script>

<style lang="scss" scoped>
.index-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: $color-background;
    .group {
        .title {
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            font-size: $font-size-small;
            color: $color-text-l;
            background: $color-highlight-background;
        }
        .item {
            display: flex;
            align-items: center;
            padding: 20px 0 0 30px;
            .avatar {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .name {
                margin-left: 20px;
                color: $color-text-l;
                font-size: $font-size-medium;
            }
        }
    }
    .fixed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        .fixed-title {
            height: 30px;
            line-height: 30px;
            padding-left:20px;
            font-size: $font-size-small;
            color: $color-text-l;
            background: $color-highlight-background;
        }
    }
    .shortcut {
        position: absolute;
        top: 50%;
        right: 4px;
        transform: translateY(-50%);
        width: 20px;
        padding: 20px 0;
        border-radius: 10px;
        text-align: center;
        background: $color-background-d;
        font-family: Helvetica;
        .item {
            padding: 3px;
            line-height: 1;
            color: $color-text-l;
            font-size: $font-size-small;
            &.current {
                color: $color-theme;
            }
        }
    }
}

</style>